<template>
	<view class="navbar" :style="`background:${bgcolor}`">
		<view class="fixed-content" :style="`background:${bgcolor}`">
            <!-- 状态栏高度 -->
			<view :style="geStatusBarHeight"></view>
            <!-- 导航栏高度 -->
			<view class="bar-content" :style="getNavBarHeight">
				<image v-if="showBack" @tap="navigateBack()" class="nav-left" :src="`${getApp.globalData.baseImgUrl}/image/arrow-left.png`" mode=""></image>
				<view class="nav-title">盘锦河蟹商家端平台</view>
			</view>
		</view>
		<!-- 占位高度，状态栏高度+导航栏高度，父组件就不需要计算导航栏高度 -->
		<view :style="topHeight"></view>
	</view>
</template>
<script>
	export default {
		name:'Navbar',
		props:{
			showBack:{
				type: Boolean,
				default: true
			},
			bgcolor:{
				type: String,
				default: '#F4E3E2'
			}
		},
		computed:{
			geStatusBarHeight(){
			    let statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']
				return `height: ${statusBarHeight}px`
			},
			getNavBarHeight(){
			    // #ifdef MP-WEIXIN
			    let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			    // 导航栏高度 = 胶囊高度 + 上间距 + 下间距 + 微调	（menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight'] = 上间距）	        
			    let navbarHeight = menuButtonInfo.height + (menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight']) * 2 + 2
			    // #endif
				return `height: ${navbarHeight}px`
			},
			topHeight(){
				let statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				// 导航栏高度 = 胶囊高度 + 上间距 + 下间距 + 微调	（menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight'] = 上间距）	        
				let navbarHeight = menuButtonInfo.height + (menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight']) * 2 + 2
				return `height: ${statusBarHeight + navbarHeight}px`
			}
		},
		data(){
			return {
				getApp:""
			}
		},
		created() {
			this.getApp = getApp()
		},
        methods: {
            navigateBack(){				
				let pages = getCurrentPages(); // 获取当前页面栈
				let currentPage = pages[pages.length - 1]; // 获取当前页面
				let route = currentPage.route
				console.log(currentPage.route); // 当前页面的URL
				let switchTabRouteList = ['pages/shop/index','pages/order/index','pages/activeCenter/index']    // 需要跳转到tabar 页面的路由
				console.log(switchTabRouteList.includes(route))
				if(switchTabRouteList.includes(route)){
					// 跳转到我的
					uni.switchTab({
						url: "/pages/my/index"
					})
				}else{
					uni.navigateBack()
				}			 
            }
        }
	}
</script>
<style lang="scss" scoped>
	.navbar{
		.fixed-content {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			padding: 0 24rpx;
			z-index: 1996;
			box-sizing: border-box;
			.bar-content{
				display: flex;
				flex-direction: row;
				align-items: center;
				position: relative;
				width: 100%;
				justify-content: center;
				.nav-left{
					width: 22px;
					height:22px;
					position: absolute;
					z-index: 2;
					top: 50%;
					left: 10rpx;
					transform: translateY(-50%);
				}
				.nav-title{
					// font-weight: bold;
					font-size: 28rpx;
				}
			}
		}
	}
</style>
